<template>
  <div class="log-tree">
    <div class="log-tree_title" v-if="showTitle">
      <el-button type="text" @click="handleTitle"><i class="iconfont iconshouye"></i>{{title}}</el-button>
    </div>
    <el-tree
      class="tree-scroll"
      node-key="id"
      :data="treeData"
      :props="defaultProps"
      :default-expand-all="isFalseExpand"
      :highlight-current="true"
      :default-expanded-keys="expandedArray"
      @node-click="handleNodeClick"
      ref="tree">
          <span class="custom-tree-node action" slot-scope="{node}">
            <span class="brother-showing">
<!--              <i class="el-icon-sort move-tree cs-mr-5"/>-->
<!--              <i :class="`iconfont icon${data.icon}`"/>-->
<!--              <i :class="`el-icon-${node.expanded ? 'folder-opened' : 'folder'}`"/>-->
              <i class="el-icon-folder"/>
              {{node.label}}
            </span>

            <span class="active" v-if="isFalseButton">
              <el-button
                type="text"
                size="mini"
                @click.stop="handleTree(node.data, 'add')">
                新增
              </el-button>

              <el-button
                type="text"
                size="mini"
                @click.stop="handleTree(node.data, 'update')">
                修改
              </el-button>

              <el-button
                type="text"
                size="mini"
                @click.stop="handleDelete(node.data)">
                删除
              </el-button>
            </span>
          </span>
    </el-tree>
    <div class="log-tree_add" v-if="showAdd">
      <el-button type="text" icon="el-icon-circle-plus-outline" @click.native="handleTree('', 'add')">{{addText}}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    isFalseButton: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: false
    },
    showAdd: {
      type: Boolean,
      default: false
    },
    addText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      isFalseExpand: true,
      expandedArray: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.tree.setCurrentKey(5)
    })
  },
  methods: {
    handleNodeClick(data) {
      const id = [data.id]
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(id)
      })
      this.$emit('handleNodeClick', data)
    },
    handleTree(val, type) {
      this.$emit('handleTree', { ...val, type: type })
    },
    handleDelete(val) {
      this.$emit('handleGroupDelete', { ...val })
    },
    handleTitle() {
      this.$emit('handleTitle')
    }
  }
}
</script>

<style scoped lang="scss">
  .log-tree {
    background: #fff;
    padding: 5px 0;
    .log-tree_title{
      font-size: 14px;
      cursor: pointer;
      i {
        margin: 0 5px 0 21px;
      }
    }
    .log-tree_add {
      margin: 0 0px 0 24px;
    }
  }
  .tree-scroll {
    max-height: 640px;
    overflow: auto;
    padding-bottom: 1px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .brother-showing {
    i {
      width: 16px;
    }
    .iconfont {
      font-size: 16px;
      vertical-align: baseline;
    }
  }
  .active {
    display: none;
  }
  .action:hover .active {
    display: block;
  }
  .move-tree {
    color: $color-text-placehoder;
    cursor: move;
  }
  .status-tree {
    color: $color-text-placehoder;
    text-decoration: line-through
  }
  .box-card {
    border-radius: 0;
    border: 1px solid $color-border-1;
  }
</style>
